import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/person'

class Person extends Component {

  addPerson = ()=>{
    console.log(this)
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = {id:nanoid(),name,age}
    this.props.addPerson(personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
  }

  render() {
    return (
      <div>
        <h2>我是Person组件</h2>
        <h2>上方组件的和为:{this.props.count}</h2>
        <input ref={c => this.nameNode = c} type="text" placeholder='输入姓名'/>
        <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄'/>
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.persons.map(item => <li key={item.id}>{item.name}---{item.age}</li>)
          }
        </ul>
      </div>
    )
  }
}

//在person中绑定state和reduxz中的值
export default connect (
  state => ({persons:state.persons, count:state.count}),
  {addPerson:createAddPersonAction}
)(Person)
